<template>
  <view class="RivalrySubjectRule">
    <!--每日练习 抽题-->
    <view class="step-form modal">
      <u--form labelPosition="left" :required="true" :model="jsonData" ref="uForm">
        <u-form-item label="选择章节" prop="structLabel" borderBottom required @click="structOpen" ref="item1"
          v-if="subType === 12">
          <u--input v-model="jsonData.structLabel" disabled disabledColor="#ffffff" placeholder="请选择"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="试题类型" prop="topicTypeLabel" borderBottom required
          @click="topicTypeShow = true; hideKeyboard()" ref="item1">
          <u--input v-model="jsonData.topicTypeLabel" disabled disabledColor="#ffffff" placeholder="请选择"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="参考难度" borderBottom required ref="item1">
          <view class="select-wr flex flex-row item-center flex-end">
            <view class="select-item flex flex-row item-center">
              <uni-data-select v-model="jsonData.minDifficulty" :clear="false" :localdata="minDifficultyTypes"
                class="uni-data-select f_1" :border="false"></uni-data-select>
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/select-icon.svg" />
            </view>
            <view class="line"></view>
            <view class="select-item flex flex-row item-center">
              <uni-data-select v-model="jsonData.maxDifficulty" :localdata="maxDifficultyTypes"
                class="uni-data-select f_1"></uni-data-select>
              <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/select-icon.svg" />
            </view>
          </view>

        </u-form-item>


        <u-form-item label="参考分值" borderBottom required ref="item1">
          <view class="select-wr flex flex-row item-center flex-end">
            <u--input v-model="jsonData.referMinScoreInt" border="none" />
            <view class="line"></view>
            <u--input v-model="jsonData.referMaxScoreInt" border="none" />
          </view>
        </u-form-item>

        <u-form-item label="每题分数" borderBottom required>
          <view class="flex flex-row flex-end item-center score">
            <u--input v-model="jsonData.score" border="none" />
            <view>分</view>
          </view>
        </u-form-item>
        <u-form-item label="试题数量" required>
          <view class="flex flex-row flex-end item-center score">
            <u--input v-model="jsonData.cnt" border="none" />
            <view>道</view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="line" style="height: 3px"></view>
    <view class="add-rule flex-row  center" @click="addRule">
      <u-icon name="plus-circle" color="#37B874" size="20"></u-icon>
      <view style="margin-left: 12px">抽取试题</view>
    </view>
    <view class="line" style="height: 10px"></view>
    <RivalryTopicList :exQuestionList="topicList" @remove="remove" @moveUp="moveUp" @moveDown="moveDown"
      @removeLevel="removeLevel" ref="RivalryTopicList"></RivalryTopicList>
    <u-action-sheet safeAreaInsetBottom :show="topicTypeShow" :actions="topicTypes" title="试题类型" @close="topicTypeClose"
      @select="topicTypeSelect">
    </u-action-sheet>
    <SelectStructPopup ref="SelectStructPopup" @structConfirm="structConfirm"></SelectStructPopup>
  </view>
</template>
<script>
import { maxDifficultyTypes, minDifficultyTypes, topicTypes } from "@/improve/components/enum";
import Navbar from "@/improve/components/Navbar.vue";
import RivalryTopicList from "./RivalryTopicList.vue";
import SelectStructPopup from "./SelectStructPopup.vue";

export default {
  name: "RivalrySubjectRule",
  components: { SelectStructPopup, RivalryTopicList, Navbar },
  inject: ['prop_practice', "pro_practiceType"],
  props: {
    subType: {
      type: Number,
    },
    questionList: {
      type: Array,
      default: () => []
    },
    levelData: {
      type: Object,
      default: () => {
      }
    }
  },
  computed: {
    detail() {
      return this.prop_practice()
    }
  },
  data() {
    return {
      topicTypeShow: false,
      topicTypes,
      minDifficultyTypes,
      maxDifficultyTypes,
      structShow: false,
      jsonData: {
        type: 0,//题目类型
        topicTypeLabel: "",
        structId: "", //章节信息
        structLabel: "",
        minDifficulty: null,
        maxDifficulty: null,
        referMinScoreInt: null,
        referMaxScoreInt: null,
        score: null,
        cnt: null,
        unit: ""
      },
      topicList: []
    }
  },
  created() {
    if (this.detail) {
      this.topicList = this.subType === this.detail.pattern ? this.detail.levelList : []
    }
  },
  methods: {
    topicTypeSelect(item) {
      this.jsonData.type = item.value
      this.jsonData.topicTypeLabel = item.name
    },
    topicTypeClose() {
      this.topicTypeShow = false;
    },
    //打开选择章节模块
    structOpen() {
      if (!this.questionList.length) {
        this.showToast('请先选择题库')
        return;
      }
      this.$refs.SelectStructPopup.open(this.questionList);
    },
    structConfirm(node) {
      this.jsonData.structId = node.structId
      this.jsonData.structLabel = node.name
    },
    hideKeyboard() {
      uni.hideKeyboard()
    },
    addRule() {
      if (!this.questionList.length) {
        this.showToast('请选择题库')
        return;
      }
      if (!this.jsonData.topicTypeLabel) {
        this.showToast('请选择试题类型')
        return;
      }
      if (!this.jsonData.minDifficulty || !this.jsonData.maxDifficulty) {
        this.showToast('请选择参考难度')
        return;
      }
      if (!this.jsonData.referMinScoreInt || !this.jsonData.referMaxScoreInt) {
        this.showToast('请填写参考分值')
        return;
      }
      if (!this.jsonData.score) {
        this.showToast('请填写每题分数')
        return;
      }
      if (!this.jsonData.cnt) {
        this.showToast('请填写试题数量')
        return;
      }
      const data = JSON.parse(JSON.stringify(this.jsonData));
      const obj = this.topicList.find((item) => item.levelName === this.levelData.levelName)
      if (obj) {
        obj.exQuestionList.push(data)
      } else {
        const obj = {
          ...this.levelData,
          exQuestionList: [data],
          subjectList: this.questionList
        }
        this.topicList.push(obj)
      }
      this.emitVal()
      //清空
      Object.keys(this.jsonData).forEach(key => {
        this.jsonData[key] = null;
      });
    },
    //删除关卡下的配置
    remove({ index, levelName }) {
      this.topicList.find((item) => item.levelName === levelName).exQuestionList.splice(index, 1);
      this.emitVal()
    },
    //删除整个关卡配置
    removeLevel(index) {
      this.topicList.splice(index, 1);
      this.emitVal()
    },
    // 上移一位
    moveUp({ index, levelName }) {
      const exQuestionList = this.topicList.find((item) => item.levelName === levelName).exQuestionList
      if (index > 0 && index < exQuestionList.length) {
        const data = JSON.parse(JSON.stringify(exQuestionList[index]));
        const nextData = JSON.parse(JSON.stringify(exQuestionList[index - 1]));
        this.$set(exQuestionList, index - 1, data);
        this.$set(exQuestionList, index, nextData);
        this.emitVal()
      }

    },
    //下移一位
    moveDown({ index, levelName }) {
      const exQuestionList = this.topicList.find((item) => item.levelName === levelName).exQuestionList
      if (index >= 0 && index < exQuestionList.length - 1) {
        const data = JSON.parse(JSON.stringify(exQuestionList[index]));
        const nextData = JSON.parse(JSON.stringify(exQuestionList[index + 1]));
        this.$set(exQuestionList, index + 1, data);
        this.$set(exQuestionList, index, nextData);
        this.emitVal()
      }
    },
    emitVal() {
      this.$emit("updateTopicList", this.topicList);
    },
    updateTopList(exQuestionList) {
      this.topicList = exQuestionList
      this.topicList.forEach(item => {
        item.topicTypeLabel = this.topicTypes.find(type => type.value === item.type).name;
      })
    },
    showToast(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
        duration: 2000
      });
    },
  },
}
</script>
<style scoped lang="scss">
.RivalrySubjectRule {

  .add-rule {
    background-color: #FFFFFF;
    padding: 29rpx;
    border-bottom-left-radius: 24rpx;
    border-bottom-right-radius: 24rpx;
  }

  .step-navbar {
    margin-top: 20rpx;
    background: white;
    display: flex;
    padding: 50rpx 32rpx 20rpx 32rpx;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
  }


  .step-form {
    margin-top: 6rpx;
    background-color: white;

    .select-wr {
      .line {
        margin: 0 6px;
        width: 10px;
        height: 2px;
        background-color: #000000;
        border-radius: 10px;
      }

      .select-item {
        width: 90px;
        height: 40px;
        background-color: #F9F9F9;
        border-radius: 10px;
        padding-right: 12rpx;

        image {
          width: 14rpx;
          height: 14rpx;
          margin-left: 6px;
        }
      }
    }

  }
}
</style>